<template>
  <div class="q-pa-md">
    <t-btn-group rounded>
      <t-btn rounded color="primary" label="One" />

      <t-btn rounded color="primary" label="Two" />

      <t-btn-dropdown auto-close rounded color="primary" label="Three" split>
        <!-- dropdown content goes here -->
        <t-list padding style="width: 250px">
          <t-item clickable>
            <t-item-section avatar>
              <t-avatar icon="folder" color="purple" text-color="white" />
            </t-item-section>
            <t-item-section>
              <t-item-label>Photos</t-item-label>
              <t-item-label caption>February 22, 2016</t-item-label>
            </t-item-section>
            <t-item-section side>
              <t-icon name="info" color="amber" />
            </t-item-section>
          </t-item>

          <t-item clickable>
            <t-item-section avatar>
              <t-avatar icon="folder" color="purple" text-color="white" />
            </t-item-section>
            <t-item-section>
              <t-item-label>Videos</t-item-label>
              <t-item-label caption>London</t-item-label>
            </t-item-section>
            <t-item-section side>
              <t-icon name="info" color="amber" />
            </t-item-section>
          </t-item>

          <t-separator inset />
          <t-item-label header>Files</t-item-label>

          <t-item clickable>
            <t-item-section avatar>
              <t-avatar icon="assignment" color="teal" text-color="white" />
            </t-item-section>
            <t-item-section>
              <t-item-label>London</t-item-label>
              <t-item-label caption>March 1st, 2018</t-item-label>
            </t-item-section>
            <t-item-section side>
              <t-icon name="info" color="amber" />
            </t-item-section>
          </t-item>

          <t-item clickable>
            <t-item-section avatar>
              <t-avatar icon="assignment" color="teal" text-color="white" />
            </t-item-section>
            <t-item-section>
              <t-item-label>Paris</t-item-label>
              <t-item-label caption>January 22nd, 2017</t-item-label>
            </t-item-section>
            <t-item-section side>
              <t-icon name="info" color="amber" />
            </t-item-section>
          </t-item>
        </t-list>
      </t-btn-dropdown>
    </t-btn-group>
  </div>
</template>
